(function () {
  //1 获取链接上携带的id
  const id = location.search.substring(4);

  // 2 发起请求
  axios({
    method: "GET",
    url: `http://124.223.14.236:3001/api/recipeInfo/${id}`,
  }).then(function (res) {
    console.log(res);
    procedure(res.data.data);
  });

  //3 渲染数据
  function procedure(data) {
    let { author, context, description, img, raw_fu_list, raw_list, raw_tl_list, raw_type, title } = data;

    // 渲染菜品标题名称，作者姓名
    document.querySelector(".title-box").innerHTML = `<h3>${title}</h3><p>${author}</p>`;
    // 渲染菜品图片，描述
    const imgs = `http://124.223.14.236:3001/public/${img}`;
    document.querySelector(".show-img").src = imgs;
    document.querySelector("blockquote").innerHTML = `<span class="txt_tart">“</span>${description}<span class="txt_end">”`;

    // 主料;
    renderList(raw_list, "raw_list");

    // 辅料;
    renderList(raw_fu_list, "raw_fu_list");

    // 调料;
    renderList(raw_tl_list, "raw_tl_list");

    // 口味
    renderList(raw_type, "raw_type");

    // 做法步骤;
    document.querySelector(".mo").innerHTML = `${title}的做法步骤`;
    document.querySelector(".recipeStep").innerHTML = context;
  }
  //4 去除 json 中多余 \
  function pattern(a) {
    let newA = a.replaceAll("/", "");
    newA = JSON.parse(newA);
    return newA;
  }
  //5 调料函数
  function renderList(raw, domId) {
    console.log(domId);
    let newraw = pattern(raw);
    document.querySelector(`#${domId}`).innerHTML = newraw
      .map((item) => {
        return `
        <li>
          <span class="category_s1">
              <a href="/YuanLiao/ZhongJinMianFen/" title="面粉的做法" target="_blank"><b>${item.name}</b></a>
          </span>
          <span class="category_s2">${item.num}</span>
        </li>
      `;
      })
      .join("");
  }
})();